Giovanna me decía si podíamos añadir un menú sencillo así que aquí va uno sencillo y vistoso a la vez. Nos situamos antes de ]]></b:skin> para añadir los estilos que son los siguientes.
#menu div.colormenu,
#menu div.colormenu a.menu {
font-family: sans-serif, Verdana, Arial;
font-size: 12pt;
color: white;
}
#menu div.colormenu {
text-align: left;
}
#menu div.colormenu a.menu {
background-color: #333;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.colormenu a.menu:hover {
background-color: #940f04;
}
Los colores los podemos modificar considerando que el color de fondo se muestra de la siguiente forma.
a.menu: tal y como lo vemos.
a.menu:hover: al pasar el cursor.
Si también queremos mostrar un color distinto al seleccionar el botón del menú podemos conseguirlo añadiendo a los estilos
#menu div.colormenu a.menu:active {
background-color:#ccc;
}
Ahora editamos un nuevo gadget escogiendo la opción HTML y en su interior añadimos lo siguiente:
<div id="menu"><div class="colormenu">
<a class="menu" href="#">Enlace 1</a>
<a class="menu" href="#">Enlace 2</a>
<a class="menu" href="#">Enlace 3</a>
<a class="menu" href="#">Enlace 4</a>
</div></div>
En lugar de texto Enlace 1 - 2- 3- 4 añadimos el texto que hará de enlace.
Donde el asterisco # lo sustituimos por la url del sitio que vamos a enlazar ya sea en el mismo blog o enlace externo.
Con "background" modificamos el color de fondo y el de fuente en "color"
Es muy buena tu idea, lo ideal sería añadirlo en la plantilla para ir viendo en vista previa y luego llevarlo al gadget.
Sería suficiente con añadir antes de los estilos <style type="text/css"> y al final </style>
Gema, amiga, justo hoy estoy estrenando menú y nueva cara en mi blog ya que cumple seis meses! Habría querido escribir una entrada al respecto pero con tanta modificación no me dió el tiempo.
Tiene algunos detallitos para arreglar pero... estoy tan contenta y vine a dejar mi alegría por acá ya que lo he conseguido gracias a tí y a Rosa.
Besos genia.
me gustaria saber como poner un menu vertical que se facil muchas gracias
Me parecía más complicado! sencillo claro, para ti jajaja, que sabes, y muy buena la idea de Malina. Qué gusto, tienes truco para todo
y además queda muy vistoso.
Igual lo hago más chiquitin??
He conseguido poner el mensaje en la pagina principal y otro para todas las demás, recuerdas? pero al ser dos gadgets de texto se nota mucho que hay una separación entre el segundo y la primera entrada en la pag.parincipal. Podría arreglarlo de alguna manera? (y de paso de mas tu opnión, que me fio muuuuucho mucho de ti
Gracias guapa. Viene genial hacer cambios en la plantilla para no pensar en nada...
POr cierto, qué bien está quedando, y se carga rapidísimo con el E8 !!!! genial!
jo, pero echo de menos el buscador de abajo que me gustaba... yo por pedir...
QUE BIEN!! Ya funciona! GRACIAS GEMA!!!
qué halagador un bonito anónimo...
Besote
En el buscador de abajo hoy me dice ésto Gema "No se encuentra la página. Lo sentimos, la página que estabas buscando en el blog Gem@ BLOG no existe". Ayer sí veía las entradas desplegables, pero todas, no lo hacía siguiendo las palabras claves a buscar, como antaño.
Era cómodo para encontrar más rápido por títulos y encontrar y molestarte menos. Te estoy volviendo loca
Y si no ya me acostumbraré al de arriba
Sobre el buscador por un momento estuvo funcionado como dices, lo veré de nuevo porque parece ser que ese buscador y yo nos caemos mal mutuamente
HOLA, SOY UN POCO NUEVO EN TODO ESTO
YO QUERIA UTILIZAR ESTOS BOTONES PARA PONER INFORMACION CUANDO SE PINCHA EN ELLOS PERO NO ME HACE NADA.ME PODIAS DECIR PORQUE?
GRACIAS
http://gemablog-.blogspot.com/2008/03/listamatic2-mens-verticales-y.html
Y aquí...
http://gemablog-.blogspot.com/2008/02/listamatic-gran-surtido-de-mens.html
Accede a las páginas de Listamatic y si ves algo que te guste me lo dices y vemos como añadirlo
Gem@:
Gracias al fin Tengo MENU y quedo super bien, he modificado los colores sin problemas. Ahora tengo una duda, para hacer los enlaces: en las entradas los nombres de cada boton seran una etiqueta o seran enlaces de url enlazadas con los titulos de cada entrada???
Gracias mil eres todo corazon
<a class="menu" href="aquí añades la url de la entrada">Enlace 1</a> donde dice por ejemplo Enlace 1 pones el texto que corresponde con lo que vas a enlazar.
Luego haces lo siguiente ... haces click en el título de la entrada y copias la url del navegador y la pegas en ese espacio que dice "aquí añades la url de la entrada" los siguientes más de lo mismo.
http://gemablog-.blogspot.com/2009/02/anadir-enlazar-configurar-menus.html
Hola gema, soy un seguidor de tu blog, realmente me encanta como explicas las cosas, muy concisa. Bueno aqui voy, estoy haciendo mi segundo blog y resulta que quiero ponerle un menu desplegable en la parte superior pero no lo he conseguido. Probé de todas formas y no hubo caso. Quieres que explique aqui mi duda??(es un poquito extenso), sino te dejo un correo por las dudas nahuelburbach@hotmail.com. Saludos!!
Mi nombre lleva al blog, es www.solobusquedas.blogspot.com. Te cuento, baje un menu desde la pagina http://www.cssmenumaker.com/builder/menu_info.php?menu=007 en la cual tu puedes personalizar el menu a tu gusto y luego descargas el menu y su codigo. El archivo contiene una carpeta con las imagenes para el menu y otro archivo .css donde trae el codigo. Lo copie tal cual, reemplaze las direcciones de las imagenes por las url de las imagenes subidas a un servidor, pero no se ve como debe ser, es como que esta incompleto. Muchas gracias por tu atencion! Saludos!
Aaa otro problema es que debe quedar bien arriba pero sin embargo parece como que todavia esta la navbar de blogger
Sobre subirlo más arriba mira bien porque me da la sensación que tienes algún gadget en esa parte.
Ya lo he solucionado ¡Gracias!
Uuu mil disculpas!
De tanto probar lo deje mal. Ahora lo solucione pero sigue sin aparecer el menu como deberia.
Teoricamente el gadget que esta bien arriba es el menu, es mas, no hay otro gadget, excepto el de la cabecera que no lo puedo eliminar pero que esta por debajo del menu.
Gracias gema por la ayuda!
Hola gema, lo probe y lo maximo que pude hacer es lo que esta ahora. Logre que quede bien arriba modificando el codigo. Lo que no puedo hacer es que la letra se vea en blanco
. Te hago una pregunta que la tengo picando desde que empeze, como puedo hacer para que el ancho del menu se adapte a la resolución de cada usuario?? Saludos!
Por otra parte lo que se adaptaría a la resolución no es el menú sino la página, eso normalmente se hace con blogs diseñados de forma que miden más de 1024 de ancho (el tuyo es de 840)para no verse obligado a utilizar el cursor.
De todas formas no tengo nada explicad osobre ese tema sin embargo J.Miur si que escribió sobre ese tema. No he podido localizar esa entrada pero te dejo en enlace
Vagabundia
Bueno el tema de la letra busque por todos lados el color y sin embargo no lo encontre. De ultima debere cambiar de menu, lo elegi a ese porque me gusto, pero debe haber algun otro, lo voy a buscar como menus drop down y voy a ver que encuentro.
Con respecto al tema de que se adapte la pagina a la resolucion voy a investigar en el blog que me pasaste.
Ahora, te hago una ultima consultilla si es que no te molesta jeje. Al final de la pagina coloque un pequeño texto que dice "copyright bla bla" pero lo coloque en letra chiquitita y en minuscula, pero sin embargo aparece en mayusculas y con letra un poquito mas grande.
Realmente agradezco tu ayuda! Saludos!!
Hola Gem@,
Como estas? yo contentisima, al fin he terminado mi blog, claro faltan los detalles, aun cuando creo que en los detalles esta la diferencia, pero creo q para ser principiante no ha quedado nada de mal, pero eso por que tuve una gran guia y master en el tema...no me canso de agradecerte gemita por toda la paciencia q tuviste y la ayuda desinteresada que me has brindado.
esto no hubiera sido posible sin tus consejos...
Cariños a la distancia
Giovanna
El tema de los detalles cuando tu quieras los vamos viendo.
Cariños amiga
text-transform: none;
De esa forma el texto se muestra tal y como lo escribimos
Alguien sabe como hacer para que el ancho y alto se puedan variar, intente aplicando hheihgt y width al css pero no funciona gracias
Hola Gema! Esta es la última pregunta que te hago respecto a mi blog, espero! Jaja. Mirá, yo quería poner ese menú simple que habías explicado como poner en cualquier parte de la cabecera pero no había forma que quedara bien asique decidi por este.
Le puse una imagen en vez de color a los botones
Bueno, lo que quiero lograr es que este menú, que está ubicado en el crosscol, quede pegado a la cabecera, y más a la derecha.
Probé con todos los padding, margin, etc., del crosscol y del menú, uno por uno, todos juntos...no hay forma! También deje el margin del header en 0, como leí por ahí en un post tuyo.
Creeme que antes de molestarte siempre intento hacerlo sola pero no puedo! Es lo último que me falta para quedar conforme
Espero puedas ayudarme, gracias!!!
Ah..el blog es blupruebas.blogspot.com
Recién me doy cuenta que con la imagen de fondo en los botones, no cambia al pasar el cursor
Fuera de bromas, he visto el menú pero tengo que mirar mejor el código fuente y comprobar esas medidas.
El Domingo estaré con el otro PC y haré la prueba en mi blog,cuando tenga la respuesta te contesto aquí mismo
jajaja Gracias por la buena onda!
POr ahí me incomoda preguntar tanto 
Buenisimo entonces, en cuanto arregle eso me queda listo el blog! Que felicidad jaja.
Un abrazo y buen fin de semana!!
Estoy por arrancarme los pelos! jaja. En firefox se ve arriba del header. Te aviso porque una vez me dijiste que usas ese navegador entonces no vas a entender cual era mi problema. Bueno, ahora hay dos! jaja
besos
http://gemablog-.blogspot.com/2009/08/menu-con-variables-de-fuentes-y-colores.html
Las explicaciones son las mismas que ves en esa entrada pero los estilos cambiarían un poco respecto a medidas, sería de la siguiente forma:
.menu {
width:900px;
height:37px;
}
.menu ul{
padding:5px 10px 10px 0;
margin:0px;
float:right;
list-style:none;
border-right: 1px solid $menuBorderColor;
background-image:url('http://img2.pict.com/6e/aa/15/1498430/0/13.png');
}
.menu li{
padding:0px;
margin:0px;
float:left;
list-style:none;
line-height:32px;
}
.menu a{
float:right;
display:block;
padding:0 15px 0 15px;
color: $menuTextColor;
font: $menuTextFont;
border-left: 1px solid $menuBorderColor;
}
.menu a:hover{
color: $menuHoverTextColor;
background: $menuHoverBgColor;
}
Si deseas que salga justo después del banner en lugar de añadirlo antes de <div id='header-wrapper'> lo añades justo después del cierre de la cabecera, sería después de algo así:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='El título de tu blog (cabecera)' type='Header'/>
</b:section>
</div>
Cualquier cosa ya me dices algo, siento la demora
Hola! Gem@. Que importante es tu blog. Tengo mucho tratando de poner la tercera columna a mi blog: www.guiapedagogicaglobal.com y me resulta imposible o dificil, por que los valores son relativos. Dime como resolverlo por favor.
Gema, tengo un problema con mi menú superior. Tengo la plantilla "Isabella" y me deja hacer enlaces en la parte superior, pero los títulos tienen que ser cortos porque si no, se enciman unos con otros.
¿que puedo hacer para que los títulos puedan ser largos?
Gracias de antemano.
EL blog es: www.elrincondenataliatrujillo.blogspot.com
Besos
HOla!! me encanta tu blog pero te voy a exponer mi problema:
yo tengo un blog es www.jovenescofradescabra.blogspot.com y Resulta que estoy en la creación de un menu con onmouse ya lo hice lo puse en un gaget para probarlo y me iva estupendamente pero el problemas es que a la hora de ponerlo en la plantilla para colocarlo arriba sale solo la primera imagen. porfavor ayuda!!. Gracias de antemano
http://gemablog-.blogspot.com/2007/01/ttulo-en-blogger-beta.html
hola gem@, estoy a punto de poner un menú, pobablemente éste, mi pregunta es si es necesario siempre eliminar la barra navegadora de blogger para poner un menú, y la segunda pregunta es si puedo crear el menú e ir añadiendo las urls de a poco.
Los enlaces se pueden añadir en el orden que uno quiera.
sí, gracias gem@, ya estuve haciendo pruebas y la única posibilidad que tengo por la estructura de la página http://paraninosconcabeza.blogspot.com es eliminar la barra de blogger... no sé por qué no tengo la opción de poner un módulo html por encima de la cabecera (¿hay solución para eso?). además abajo de todo del footer no sé si quedaría bien...
te preguntaba si puedo ir añadiendo las urls de a poco una vez tenga instalado el menú. tenkiu!
perdona, no leí tu respuesta hasta el final. estoy escrachada. tengo mucho trabajo y estudios...
http://gemablog-.blogspot.com/2007/06/aadir-elementos-en-pgina-de-diseo.html
La última entrada publicada también te será de ayuda.
hola gem@, acabo de poner menú en http://libroscolgados.blogspot.com, pero verás que queda pegado al recuadro del título (muy feo). ¿se te ocurre alguna forma de separarlo?
hola gema, he puesto uno de tus menús en http://cielosdondeestaeldinero.blogspot.com, pero no es el que me gusta. me gusta éste. el problema es que cuando pongo la segunda parte en un widget HTML me aparece naturalmente en la sidebar. ¿cómo hago para que me aparezca arriba del título? tankiu
Aunque lo ideal es que lo añadas directamente en un gadget en ese sitio sin necesidad de arrastrarlo
hola gema@, es que en mi plantilla no aparece la posibilidad de poner un gadget encima del título (una mínima left)... ¿?
http://gemablog-.blogspot.com/2007/06/aadir-elementos-en-pgina-de-diseo.html
hola gem@!! mi menú con widget sobre el título ha quedado PRECIOSO. pro ¿cómo hago para justificarlo a la derecha? en http://cielosdondeestaeldinero.blogspot.com. tenkiu
#menu div.colormenu {
text-align:left;
prueba con text-align:center; yo he probado y te queda bien centrado
hola a todos de republica dominicana
muy buen post
aun tengo una duda soy nuevo en esto
me salio el menu
pero como hago para poner cada entrada en cada submenu
http://gemablog-.blogspot.com/2009/02/anadir-enlazar-configurar-menus.html
Hola Gem@! Andaba buscando como lograr este efecto y gracias a ti lo he conseguido
pero tengo una pregunta... si quiero eliminar el espacio que se hace entre los enlaces, como le hago? estaba modificando la propiedad padding, pero me di cuenta que esa es para modificar el tamaño del fondo del link... espero entiendas lo que quiero hacer. Gracias!
#menu div.colormenu, #menu div.colormenu a.menu {
color: white;
font-family: sans-serif,Verdana,Arial;
font-size: 10pt;
margin-left: -5px;
}
Hola Gema, que buen Menu.
Como puede disminuir o aumentar el espacio entre las pestañas?
Nota: solo los miembros de este blog pueden publicar comentarios.